<template>
  <div class="header">
    <van-nav-bar left-arrow @click-left="$router.back()" >
        <template #left>
          <van-icon name="arrow-left" size="26" color="#000" />
           </template>
           </van-nav-bar>
    <div class="title">
     <img src="//m.360buyimg.com/mobilecms/s750x750_jfs/t1/87776/33/5985/722748/5df096b4E7b0e72bf/697e54f5f7cb37bd.jpg!q80.dpg" alt="">
     <div>
    <p>{{name}}  </p>
    <span>   {{tel}}</span>
    </div>
    </div>
    <div class="main">
      <ul>
        <van-cell is-link title="我的收货地址" @click="$router.push('/address')"  />

        <van-cell is-link title="账号与安全" @click="show = true"  />
<van-action-sheet v-model="show" :actions="actions" @select="onSelect" cancel-text="取消" />
        
      </ul>
    </div>
  </div>
</template>

<script>

import Vue from 'vue';
import { ActionSheet } from 'vant';

Vue.use(ActionSheet);
import { doInfo } from "../api/user";
export default {
data() {
    return {
      show: false,
      actions: [{ name: '修改用户名' }, { name: '修改密码' }, { name: '修改账号' }],
     name:"",
     tel:""
     
    };
},
 methods: {
    onSelect(action, index) {
      switch (index) {
        case 0:
          
          break;
        case 1:
        this.$router.push("/passmy")
       

          break;

        default:
          break;
      }
  }
  },
  created () {
    if(localStorage.getItem("token")){
      doInfo({userid:localStorage.getItem("userid")}).then((data)=>{
   console.log(data.data.data[0])
    this.name=data.data.data[0].nickname
   this.tel=data.data.data[0].tel.slice(0,3)+'****'+data.data.data[0].tel.slice(7)
  })
    }
  }
}
</script>

<style scoped>
.title,.title1{
  margin: 18px auto;
  display: flex;
}
.title img{
  height: .5rem;
  border-radius: 50%;
}
.title p{
  font-weight: bold;
  font-size: .2rem;
  margin: 0 20px ;
}
.title span{
  margin-left: .1rem;
  
}
.title{
  margin-left: .2rem;
}
</style>